<template>
  <!--  进销存数据统计-->
  <div>
    <!--        时间筛查-->
    <div
      style="margin-left: 20px;width: 800px;height: 80px ;line-height: 80px;display: flex;align-items: center">
      <el-date-picker
        :clearable="false"
        style="width:60%;min-width:240px;height: 40px;margin-right: 10px"
        size="small"
        value-format="timestamp"
        v-model="timerArray"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="预警开始日期"
        end-placeholder="预警结束日期">
      </el-date-picker>
      <el-button class="common_btn-defalut" icon="el-icon-search" style="width: 20%"
                 @click="refresh">搜索
      </el-button>
    </div>
    <div class="page_main">
      <el-card style="width: 98% ;margin: auto">
        <echarts-one-columnar ref="echartsOneColumnar1" style="width: 100%;height: 550px"></echarts-one-columnar>
      </el-card>
      <el-card style="width:98%;overflow:auto;margin: auto;margin-top: 10px">
        <echarts-one-columnar ref="echartsOneColumnar2" style="min-width:100%;height: 550px"></echarts-one-columnar>
      </el-card>
      <div style="margin:0 10px;display: flex;align-items: center;justify-content:space-between">
        <el-card style="width:48%">
          <echarts-one-columnar @picId="picId" ref="echartsOneColumnar3"
                                style="width: 100%;height: 550px"></echarts-one-columnar>
        </el-card>
        <el-card style="width:48%" v-show="barShow">
          <echarts-one-bar ref="echartsOneBar1" style="width: 40vw;height: 550px"></echarts-one-bar>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
  import Format from '@/utils/format'
  import echartsOneColumnar from './../echarts/echarts-1-columnar'
  import echartsOneBar from './../echarts/echarts-1-bar'
  import {erpGoods, erpSaleOrder, erpSaleGoodsByCompany} from '@/services/ERP/order'

  const timer = 30 * 24 * 3600 * 1000
  export default {
    components: {echartsOneColumnar, echartsOneBar},
    data() {
      return {
        barShow: false,
        // 时间选择器配置
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          },
            {
              text: '最近半年',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一年',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '全部',
              onClick(picker) {
                const end = null
                const start = null
                picker.$emit('pick', [start, end])
              }
            }
          ],
          onPick: obj => {
            this.picerMinDate = new Date(obj.minDate).getTime()
          },
          disabledDate: time => {
            if (this.picerMinDate) {
              // 最多可选3个月
              const LIMIT = 90 * 24 * 60 * 60 * 1000
              const maxTime = this.picerMinDate + LIMIT
              const minTime = this.picerMinDate - LIMIT
              return time.getTime() > maxTime || time.getTime() < minTime
            }
          }
        },
        deptTree: {
          deptTreeId: '',
        },
        card: {
          checkedCard: [] //选中的返回的数据
        },
        form: {
          startCreateTime: Date.parse(new Date()) - timer,
          endCreateTime: Date.parse(new Date()),
        },
      }
    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer), 'yyyy-MM-dd hh:mm:ss')
      },
    },
    computed: {
      // 时间筛选
      timerArray: {
        get() {
          return [this.form.startCreateTime, this.form.endCreateTime]
        },
        set([startTimer, endTimer]) {
          this.form.startCreateTime = startTimer
          this.form.endCreateTime = endTimer
        }
      },
    },
    watch: {},
    mounted() {
      this.refresh()
    },
    methods: {
      refresh() {
        this.barShow=false
        this.getDataStatistics()
        this.getErpSaleOrder()
      },
      picId(value) {
        this.barShow = true
        this.getErpSaleGoodsByCompany(value)
      },
      async getErpSaleGoodsByCompany(value) {
        let {data} = await erpSaleGoodsByCompany({
          startCreateTime: this.form.startCreateTime,
          startCreateTime: this.form.startCreateTime,
          id: value.id
        })
     this.$refs.echartsOneBar1.updateEchart(data,value.name+'订单中各货品的数量占比统计')
      },
      async getDataStatistics() {
        let {data} = await erpGoods(this.form)
        this.$refs.echartsOneColumnar1.updateEchart(data.itemList, '货品出库总量统计', 1,0)
        this.$refs.echartsOneColumnar2.updateEchart(data.itemList2, '货品库存总量统计', 1,2)

      },

      async getErpSaleOrder() {
        let {data} = await erpSaleOrder(this.form)
        this.$refs.echartsOneColumnar3.updateEchart(data, '所有客户销售订单数量统计', 2,3)
      },
    },
  }
</script>
<style scoped lang="less">
  .page_main {
    text-align: center;
    padding-bottom: 20px;

    .el-card {
      /*margin: auto;*/
      margin-top: 10px;

    }
  }
</style>
